<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>留言管理</title>

</head>

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet"
      href="css/index.css">
<link rel="stylesheet"
      href="css/custom/el-custom.css">
<body>
<div th:insert="admin/navigate::nav"></div>
<div class="panel-heading" style="margin-top: -17px;">
    <a href="#" class="list-group-item active">
        <center><strong>留言管理</strong></center>
    </a>
</div>
<div id="app" class="mx-container" style="margin-top: -27px;">
    <div class="mx-main-content">
        <div class="mx-table-content">
            <el-table
                    :data="tableData"
                    :stripe="true"
                    style="width: 100%">
                <el-table-column
                        type="index"
                        label=""
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="userName"
                        label="用户名"
                        width="250">
                </el-table-column>
                <el-table-column
                        prop="userType"
                        label="用户类型"
                        align="center"
                        width="250">
                    <template slot-scope="scope">
                        <span v-if="scope.row.userType == '0'">普通用户</span>
                        <span v-if="scope.row.userType == '1'">管理员</span>

                    </template>
                </el-table-column>
                <el-table-column
                        prop="title"
                        label="标题"
                        width="250">
                </el-table-column>
                <el-table-column
                        prop="description"
                        label="留言内容"
                        align="center"
                        width="250">
                </el-table-column>
                <el-table-column
                        prop=""
                        label="操作"
                        align="center"
                        width="350">
                    <template slot-scope="scope">
                        <el-button
                                type="primary"
                                size="mini" plain
                                @click="onEdit(scope.$index)">
                            修改
                        </el-button>
                        <el-button
                                type="danger"
                                size="mini" plain
                                @click="onDelete(scope.$index)">
                            删除
                        </el-button>
                        <el-button type="info"
                                   size="mini" plain
                                   @click="onReset(scope.$index)">
                            一键屏蔽
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
    <!--修改用户信息对话框-->
    <el-dialog
            :title="dialogEdit.title"
            :visible.sync="dialogEdit.visible"
            :modal-append-to-body="false"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            width="60%">
        <el-form :model="mymodel" label-width="150px">
            <el-form-item hidden>
                <el-input v-model="mymodel.userName"></el-input>
            </el-form-item>
            <el-form-item label="用户类型：">
                <!--使用label表示值-->
                <el-radio-group v-model="mymodel.userType" size="mini">
                    <el-radio-button label="0">学生</el-radio-button>
                </el-radio-group>
            </el-form-item>
            </el-form-item>
            <el-form-item label="留言信息：">
                <el-col :span="15">
                    <el-input v-model="mymodel.description"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="mini" @click="onSubmitEdit()">保存</el-button>
                <el-button size="mini" @click="dialogEdit.visible=false">取消</el-button>
            </el-form-item>

        </el-form>

    </el-dialog>

    <!--重置密码对话框-->
</div>
<!--1 引入vue-->
<script src="js/vue/vue.js"></script>
<!--2 引入element js-->
<script src="js/index.js"></script>
<!--3 引入axios js-->
<script src="js/axios/axios.min.js"></script>
<!--4 引入配置js-->
<script src="js/mx-config.js"></script>

<script>
    var app = new Vue({
        el:"#app",
        data:function () {
            return{
                tableData:[],
                dialog:{
                    title:'',
                    visible:false
                },
                //控制修改对话框
                dialogEdit:{
                    title:'',
                    visible:false
                },

                mymodel:{
                    id:'',
                    userName:'',
                    userType:'1',
                    titile:'',
                    description :''

                },
                //定义一个临时变量，保存选中了哪一行数据
                selectedIndex:-1
            }
        },

        //生命周期钩子
        mounted:function(){
            //初始化表格
            this.initTable();
        },

        methods:{
            //初始化表格：从后台获得数据
            initTable:function(){
                axios.get("/admin/messages").then(res => {
                    this.tableData = res.data;
                })
            },

            //响应添加按钮
            onAdd:function () {
                //清空表单
                this.mymodel = {
                    id:'',
                    userName:'',
                    userType:'1',
                    titile:'',
                    description:''
                };

                this.dialog.title = '注册用户';
                this.dialog.visible = true;
            },
            //响应注册用户对话框 保存 按钮
            onSubmitAdd:function () {
                //通过axios的post方法，把表单数据提交给后台
                //语法是es6
                axios.post("/admin/users/",this.mymodel).then(res => {
                    //1 各一个提示信息
                    this.$message({
                        message:'保存成功！',
                        type:'success'
                    });
                    //2 更新 表格
                    //方法一：
                    this.tableData.push(res.data);
                    //方法二:
                    //this.tableData.splice(this.tableData.length,0,res.data);
                    //方法三：直接查询数据库，更新表格

                    //3 关闭对话框
                    this.dialog.visible = false;
                })
            },

            //响应修改按钮
            onEdit:function (index) {
                //把整个索引存到一个临时变量
                this.selectedIndex = index;
                //回填数据
                this.mymodel = {
                    id:this.tableData[index].id,
                    userName:this.tableData[index].userName,
                    userType:this.tableData[index].userType,
                    titile:this.tableData[index].titile,
                    description:this.tableData[index].description
                };

                //显示对话框
                this.dialogEdit.title = '修改用户基本信息';
                this.dialogEdit.visible = true;
            },
            //响应修改 保存 按钮
            onSubmitEdit:function () {
                //通过axios的put方法，把表单数据提交给后台
                axios.put("/admin/messageModefy",this.mymodel).then(res =>{
                    this.$message({
                        message:'保存成功！',
                        type:'success'
                    });

                    this.tableData.splice(this.selectedIndex,1,res.data);

                    this.dialogEdit.visible = false;

                })
            },

            //响应删除按钮
            onDelete:function (index) {
                //确认提示
                this.$confirm("确认删除该数据吗？","提示",{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning'
                }).then(() => {
                    //删除
                    axios.delete("/admin/messageDelete/"+this.tableData[index].id).then(res =>{
                        if (res.data == '200') {
                            this.$message("删除成功！");
                            this.tableData.splice(index, 1);
                        } else {
                            this.$message("删除失败!");
                        }
                    })
                });

            },
            //  响应屏蔽
            onReset:function (index) {
                {
                    //确认提示
                    this.$confirm("确认要屏蔽字吗？","提示",{
                        confirmButtonText:'确定',
                        cancelButtonText:'取消',
                        type:'warning'
                    }).then(() => {
                        //重置
                        axios.delete("/admin/reset/"+this.tableData[index].id).then(res =>{

                                this.$message("已经屏蔽恶意语言!");
                                this.tableData.splice(index,1,res.data);

                        })
                    });

                }
            }

        }

    });
</script>
</body>
</html>